<html>
<head>
	<title>js_04</title>
	<meta charset="utf-8"/>
	<style>
	*{
		margin:0;
		padding:0;
	}
	#div1{
		border:1px solid red;
		width:968px;
		height:150px;
		margin:100px auto;
		position:relative;
		overflow:hidden;
	}
	#div1 ul{
		position:absolute;
		left:0px;
		top:0;
	}
	#div1 ul li{
		width:242px;
		height:150px;
		float:left;
		list-style:none;
	}
	</style>
	<script>
		window.onload=function(){
			var oDiv=document.getElementById("div1");
			var oUl=oDiv.getElementsByTagName("ul")[0];
			var aLi=oUl.getElementsByTagName("li");
			var timer=null;
			var speed=-2;
			oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
			oUl.style.width=aLi[0].offsetWidth*aLi.length+"px";
			
			function move(){
				if(oUl.offsetLeft<-oUl.offsetWidth/2){
					oUl.style.left="0px";
				}
				if(oUl.offsetLeft>0){
					oUl.style.left=-oUl.offsetWidth/2+"px";
				}
				oUl.style.left=oUl.offsetLeft+speed+"px";
			};
			timer=setInterval(move,30);
			oDiv.onmouseover=function(){
				clearInterval(timer);
			};
			oDiv.onmouseout=function(){
				timer=setInterval(move,30);
			};
			
			var oA=document.getElementsByTagName("a");
			oA[0].onclick=function(){
				speed=-2;
			}
			oA[1].onclick=function(){
				speed=2;
			}
		}
	</script>
</head>
<body>
	<a href="javascript:;">向左走</a>
	<a href="javascript:;">向右走</a>
	<div id="div1">
		<ul>
			<li><img src="pic/1.jpg"/></li>
			<li><img src="pic/2.jpg"/></li>
			<li><img src="pic/3.jpg"/></li>
			<li><img src="pic/4.jpg"/></li>
		</ul>
	</div>
</body>
</html>